const seedSlider = document.getElementById('seed-slider');
const seedValue = document.getElementById('seed-value');
const inputArea = document.getElementById('input');
const model=document.getElementById('process');
const res_con = document.querySelector('.res-con');

seedSlider.addEventListener('input', () => {
    seedValue.value = seedSlider.value;
});

function generateImage() { 
    document.querySelector('.main-content').style.display='none';
    const result = document.querySelector('.result');
    result.style.display = 'block';
    const message = document.createElement('div');
    message.classList.add('message', 'user-message');
    message.textContent = inputArea.value;
    res_con.appendChild(message);
    const loading = document.createElement('div');
    loading.classList.add('message', 'bot-message');
    loading.id = 'loading-message';
    loading.innerHTML = '制作中...';
    res_con.appendChild(loading);
    fetch('/image', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            first: model.value,
            seed: seedSlider.value,
            prompt: inputArea.value,
            width: 1024,
            height: 1024
        })
    })
    .then(response => response.json())
    .then(data => {
        console.log(data);
        loading.remove();
        const AImessage = document.createElement('div');
        AImessage.classList.add('message', 'bot-message'); 
        
        const content = document.createElement('div');
        content.classList.add('model-content');
        content.innerHTML = marked.parse(data.text);
        AImessage.appendChild(content);
        res_con.appendChild(AImessage);

        const image = document.createElement('img');
        image.src = data.img;
        image.classList.add('message' ,'result-image');
        res_con.appendChild(image);
    });
}

function submit(){
    const inp=document.querySelector('textarea');
    document.querySelector('textarea').value = '';
    const message = document.createElement('div');
    message.classList.add('message', 'user-message');
    message.textContent = inp.value;
    res_con.appendChild(message);
    const loading = document.createElement('div');
    loading.classList.add('message', 'bot-message');
    loading.id = 'loading-message';
    loading.innerHTML = '制作中...';
    res_con.appendChild(loading);
    fetch('/image', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            first: model.value,
            seed: seedSlider.value,
            prompt: inp.value,
            width: 1024,
            height: 1024
        })
    })
    .then(response => response.json())
    .then(data => {
        console.log(data);
        loading.remove();
        const AImessage = document.createElement('div');
        AImessage.classList.add('message', 'bot-message'); 
        
        const content = document.createElement('div');
        content.classList.add('model-content');
        content.innerHTML = marked.parse(data.text);
        AImessage.appendChild(content);
        res_con.appendChild(AImessage);

        const image = document.createElement('img');
        image.src = data.img;
        image.classList.add('message' ,'result-image');
        res_con.appendChild(image);
    });
}

async function logout() {
    try {
        const userInfoResp = await fetch('/api/check_auth', { credentials: 'include' });
        const userInfo = await userInfoResp.json();
        if (userInfo.logged_in) {
            await fetch('/api/udp-proxy', {
                method: 'POST',
                credentials: 'include',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    message: {
                        type: 'client_disconnect',
                        data: {
                            user_id: userInfo.user_id,
                            username: userInfo.username,
                            timestamp: new Date().toISOString()
                        }
                    }
                })
            });
        }
        const response = await fetch('/api/logout', {
            method: 'POST',
            credentials: 'include'
        });
        const data = await response.json();
        if (data.redirect) {
            window.location.href = data.redirect;
        }
    } catch (error) {
        console.error('退出登录错误:', error);
        window.location.href = '/login';
    }
}